<template>
	<view class="sluice-gate-container">
		<!-- 闸门背景容器 -->
		<view class="gate-background" :style="{backgroundColor: containerBgColor}">
			<!-- 动态闸门部分 -->
			<view class="gate" :style="{
          height: gateHeight + 'rpx',
          backgroundColor: gateColor
        }"></view>

			<!-- 水位线 -->
<!-- 			<view class="water-line" :style="{
          bottom: gateHeight + 'rpx',
          backgroundColor: waterLineColor,
          boxShadow: `0 0 6rpx ${waterLineColor}`
        }"></view> -->

			<!-- 水位线文字 - 智能调整位置 -->
			<view class="water-level-text" :style="getTextStyle(gateHeight)">
				{{ setHeight.toFixed(3) }}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		data
	} from '../uni_modules/uview-ui/libs/mixin/mixin';

	export default {
		props: {
			gateHeight: {
				type: Number,
				default: 0
			},
			setHeight: {
				type: Number,
				default: 0
			},
			gateColor: {
				type: String,
				default: '#4a8cff'
			},
			containerBgColor: {
				type: String,
				default: '#f0f0f0'
			},
			waterLineColor: {
				type: String,
				default: '#f0f0f0'
			},
			textBgColor: {
				type: String,
				default: 'rgba(255, 255, 255, 0.9)'
			},
			textColor: {
				type: String,
				default: '#333'
			}
		},
		methods: {
			getTextStyle(height) {
				// 低高度时文字上移，高高度时文字下移
				const offset = height < 50 ? -30 : (height > 180 ? 30 : 0);
				return {
					bottom: height + 'rpx',
					backgroundColor: this.textBgColor,
					color: this.textColor,
					transform: `translateY(calc(50% + ${offset}rpx))`
				};
			}
		}
	}
</script>

<style lang="scss">
	.sluice-gate-container {
		display: flex;
		justify-content: center;

		.gate-background {
			width: 150rpx;
			height: 200rpx;
			border: 2rpx solid #999;
			position: relative;
			border-radius: 0 0 8rpx 8rpx;
			overflow: hidden;

			.gate {
				width: 100%;
				position: absolute;
				bottom: 0;
				transition: all 0.5s ease;
				border-radius: 0 0 5rpx 5rpx;
			}

			.water-line {
				position: absolute;
				left: 0;
				width: 100%;
				height: 2rpx;
				z-index: 1;
			}

			.water-level-text {
				position: absolute;
				right: 10rpx;
				padding: 4rpx 8rpx;
				border-radius: 6rpx;
				font-size: 30rpx;
				white-space: nowrap;
				z-index: 2;
				max-width: 100rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				transition: all 0.3s ease;
			}
		}
	}
</style>